<template>
  <div class="login-form">
    <div class="header">
      <svg-icon icon="logo" class="logo"></svg-icon>
      <p>绩效考核管理系统</p>
    </div>
    <el-form
      ref="loginFromRef"
      :rules="loginRules"
      :model="loginForm"
      class="login-el-form"
    >
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入用户名"
          clearable
          size="large"
        />
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="loginForm.password"
          prop="password"
          type="password"
          show-password
          placeholder="请输入密码"
          clearable
          size="large"
        />
      </el-form-item>
      <el-form-item
        prop="verifyCode"
        style="display: flex; flex-direction: row"
      >
        <div class="imgCode">
          <el-input
            v-model="loginForm.verifyCode"
            placeholder="请输入验证码"
            clearable
            size="large"
          />
          <img
            :src="verifyCodeImg"
            @click="getVerifyCodeA"
            alt="验证码获取失败"
            style="height: 40px; margin-left: 10px"
          />
        </div>
      </el-form-item>
    </el-form>
    <el-button
      @click="handleLogin"
      type="primary"
      size="large"
      round
      style="width: 20.625rem"
      >登 录</el-button
    >
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { validatePassword, validateCode } from "../rules";
import { getVerifyCode } from "@/service/api/common";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const verifyCodeImg = ref("");

const getVerifyCodeA = async () => {
  verifyCodeImg.value = await getVerifyCode();
};

onMounted(() => {
  getVerifyCodeA();
});

//数据源
const loginForm = ref({
  username: "",
  password: "",
  verifyCode: "",
});
//验证规则
const loginRules = ref({
  username: [
    {
      required: true,
      trigger: "blur",
      message: "请输入用户名",
    },
  ],
  password: [
    {
      required: true,
      trigger: "blur",
      validator: validatePassword(),
    },
  ],
  verifyCode: [
    {
      required: true,
      trigger: "blur",
      validator: validateCode(),
    },
  ],
});

// 登录动作处理
const loading = ref(false);
const loginFromRef = ref(null);
const store = useStore();

/**
 * 登录
 */
const handleLogin = () => {
  loginFromRef.value.validate(async (valid) => {
	
    if (!valid) return;
    loading.value = true;
    await store.dispatch("user/login", loginForm.value);
    loading.value = false;
  });
};
</script>

<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.login-form {
  @include flex-center;
  position: absolute;
  right: 10%;
  flex-direction: column;
  box-sizing: border-box;
  background-color: transparent;
  padding: 2.1875rem 1.875rem;
  border-radius: 30px;
  gap: 1.875rem;
  .header {
    @include flex-center;
    width: 100%;
    justify-content: space-between;
    .logo {
      font-size: 64px;
      stroke-dasharray: 2500;
      stroke-dashoffset: 2500;
      animation: stroke 3s forwards;
    }
    p {
      font-size: 25px;
      color: #5a5e66;
    }
  }
  .login-el-form {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    .el-form-item {
      margin-bottom: 0;
    }
    .imgCode {
      width: 20.625rem;
      display: flex;
      align-items: center;
      flex-direction: row;
    }
    span {
      white-space: nowrap;
      margin-left: 10px;
    }
  }
  .remenberme {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 20.625rem;
    .el-checkbox {
      height: auto;
    }
    span {
      white-space: nowrap;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>
